<template>
  <div class="body-container">
    <div class="top-container">
        <n-affix :trigger-top="0" class="affix">
          <div>
            <div class="left-menu"> 
              <n-menu v-model:value="backgroundActiveKey" mode="horizontal" :options="backgroundOptions"/>
            </div>
          
            <div class="right-menu">
              <n-menu v-model:value="menuActiveKey" mode="horizontal" :options="menuOptions" />
            </div>
          </div>
        </n-affix>
        <div id="effects-container">
          <MotionParticle  v-show="backgroundActiveKey == 'montion-particle'"/>
          <Carousel  v-show="backgroundActiveKey == 'round-cast-chart'" @click="test()"/>
        </div>
      </div>
    <div class="content-container"><span style="color:red;">内容</span></div>
  </div>
 
</template>

<script>
import { defineComponent, h, ref } from "vue";
import {NBreadcrumbItem,NBreadcrumb,NIcon,NDropdown,NMenu,NAffix,NTab } from "naive-ui";
import {IosNuclear} from "@vicons/ionicons4";
import {Brightness1Round,QuestionMarkFilled} from "@vicons/material";
import {AlignJustify,Home,Star,Comments} from "@vicons/fa";
import {PictureFilled} from "@vicons/antd";
import MotionParticle from "../components/MotionParticle.vue";
import Carousel from "../components/Carousel.vue";

export default {
  components: {
    NBreadcrumbItem,
    NBreadcrumb,
    NIcon,
    NDropdown,
    NMenu,
    NAffix,
    NTab,
    MotionParticle,
    Carousel
  },
  setup () {
    return {
      menuActiveKey:ref(null),
      backgroundActiveKey: ref("montion-particle"),
      menuOptions,
      backgroundOptions,
      containerRef,
    }
  },
  methods: {
    test(){
      console.log("测试")
    }
  }
}

function renderIcon(icon) {
  return () => h(NIcon, null, { default: () => h(icon) });
}

const containerRef = ref(void 0);

const backgroundOptions= [
  {
    label: "",
    key: "switch-backgrounds",
    icon: renderIcon(AlignJustify),
    children: [
      {
        type: "group",
        label: "背景",
        key: "background",
        children: [
          {
            label: "动态粒子",
            key: "montion-particle",
            icon: renderIcon(IosNuclear)
          },
          {
            label: "轮播图",
            key: "round-cast-chart",
            icon: renderIcon(PictureFilled)
          },
          {
            label: "???",
            key: "???",
            icon: renderIcon(QuestionMarkFilled)
          }
        ]
      },
    ]
  },

];

const menuOptions = [
  {
    label: '首页',
    key: 'home',
    icon: renderIcon(Home),
    children: [
      {
        label:'引导页',
        key:'guide-page',
        icon: renderIcon(Brightness1Round)
      },
      {
        label: '首页',
        key: 'home-page',
        icon: renderIcon(Brightness1Round)
      }
    ]
  },
  {
    label: '收藏',
    key: 'collect',
    icon: renderIcon(Star),
    children: [
      {
        label:'xxx',
        key:'steam-page',
        icon: renderIcon(Brightness1Round)
      },
      {
        label: 'yyy',
        key: 'nintendo-page',
        icon: renderIcon(Brightness1Round)
      }
    ]
  },
  {
    label: '留言',
    key: 'message',
    icon: renderIcon(Comments),
    children: [
      {
        label:'关于',
        key:'introduce-page',
        icon: renderIcon(Brightness1Round)
      },
      {
        label: '留言板',
        key: 'message-board-page',
        icon: renderIcon(Brightness1Round)
      }
    ]
  },
];
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 @import '@/css/function/home/home.css';

</style>